<template>
	<section>
		<headers txt="添加银行卡"></headers>
		<ul class="mu20 ">
			<li class="bbtm md10 sz30 wallfff flex_middle plr30  hei100" @click="getBank">
				<span class="w25">银行卡:</span>
				<p class="flex1">{{BankID.Text}}</p>
				<i class="icon-advance"></i>
			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="Account " class="flex_self w25">银行卡卡号:</label>
				<input id="Account " v-model="Account " class="flex1 sz30" type="text" />

			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="Holder" class="flex_self w25">开户人姓名:</label>
				<input id="Holder" v-model="Holder" class="flex1 sz30" type="text" />

			</li>
			<li class="bbtm md10 sz30 wallfff flexs plr30  hei100">
				<label for="Address" class="flex_self w25">开户行地址:</label>
				<input id="Address" v-model="Address" class="flex1 sz30" type="text" />
			</li>
		</ul>
		<button class="btns mu30" type="button" @click="sure">确认</button>

		<mt-popup v-model="bankflag" position="bottom" closeOnClickModal="false" class="w100">
			<h1 class="centre p30 bbtm sz28 fontwt">选择银行卡</h1>
			<ul class="bank_ul">
				<li v-for="(item,index) in bankMess" class="pud20 bbtm sz30 centre" @click="setBank(index)">
					{{item.Text}}
				</li>
			</ul>
		</mt-popup>
	</section>
</template>

<script>
	import { Popup } from 'mint-ui';
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	export default {
		data() {
			return {
				bankMess: [],
				bankflag: false,
				BankID: {
					"Text": "请选择银行卡",
					"Value": ""
				},
				Account: "",
				Holder: "",
				Address: ""
			}
		},
		created(){
			
		},
		methods: {
			getBank: function() {
				let v = this;
				v.bankflag = true;
				if(!sessionStorage.bankMess) {
					v.$http.get("/BaseSelect/v1.0/GetBank").then((res) => {
						if(!res.data.Return_ID) {
							v.bankMess = res.data.Return_Data;
							sessionStorage.bankMess = JSON.stringify(res.data.Return_Data);
						} else {
							Toast(res.data.Return_Mess)
						}
					});
				} else {
					v.bankMess = JSON.parse(sessionStorage.bankMess);
				}

			},
			setBank: function(index) {
				let v = this;
				v.BankID = v.bankMess[index];
				v.bankflag = false;
			},
			sure: function() {
				let v = this,
					name = /^[\u4e00-\u9fa5]{2,}$/,
					ids = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				if(!v.BankID.Value) {
					Toast("请选择银行卡");
				} else if(!/^\d{16}|\d{19}$/.test(v.Account)) {
					Toast("请输入正确银行卡卡号");
				} else if(!name.test(v.Holder)) {
					Toast("请输入姓名");
				} else if(!name.test(v.Address)) {
					Toast("开户行地址");
				} else {
					Indicator.open();
					v.$http.post("/WorkMembersAsset/v1.0/MembersBankAdd", Qs.stringify({
						"MembersID": sessionStorage.MembersID,
						"BankID": v.BankID.Value,
						"Holder": v.Holder,
						"Account": v.Account,
						"Address": v.Address,
						"Mark": 0
					})).then((res) => {
						Indicator.close();
						if(!res.data.Return_ID) {
							Toast(res.data.Return_Mess);
							sessionStorage.removeItem("bank");
							v.$router.back();
						} else {
							Toast(res.data.Return_Mess);
						}
					})

				}
			},
		}
	}
</script>

<style>

</style>